<template>
    <div class="round">
        <ul>
            <li v-for="(item,index) in list" :key='"list"+index' :ref="'li'+(index+1)"
                :class="'li'+(index+1)+(index==1?' center':index==0?' left':' right')" @click="imgClick(index)">
                <img :src="item" alt="">
            </li>
        </ul>
    </div>
</template>

<script type="text/javascript">
/**
 * @Author dingxing [2022-10-14 15:16:23]
 * @Description 
 */
export default {
    name: 'ca-round',
    components: {
    },

    props: {},

    data() {
        return {
            list: [
                "https://www.changan.com.cn/uploads/car_model_photo/ef98fa13ec5624ce2ce6c689568677ca.png",
                "https://www.changan.com.cn/uploads/car_model_photo/accadc01822d8339dd71a361f61c3bef.png",
                "https://www.changan.com.cn/uploads/car_model_photo/b4b1453fadd88dc5e8ec45ac4a561404.png",
            ]
        }
    },

    watch: {},

    created() { },

    mounted() {
    },

    methods: {
        imgClick(index) {
            console.log(index)

            // 默认第一个
            if (index == 0) {
                let value = this.$refs['li1'][0].classList[1]
                if (value == 'left') {
                    this.$refs['li1'][0].classList.remove('left');
                    this.$refs['li1'][0].classList.add('center');

                    this.$refs['li2'][0].classList.remove('center');
                    this.$refs['li2'][0].classList.add('right');

                    this.$refs['li3'][0].classList.remove('right');
                    this.$refs['li3'][0].classList.add('left');
                }
                if (value == 'center') {
                    return
                }
                if (value == 'right') {
                    this.$refs['li1'][0].classList.remove('right');
                    this.$refs['li1'][0].classList.add('center');

                    this.$refs['li2'][0].classList.remove('left');
                    this.$refs['li2'][0].classList.add('right');

                    this.$refs['li3'][0].classList.remove('center');
                    this.$refs['li3'][0].classList.add('left');
                }
            }

            // 默认第二个
            if (index == 1) {
                let value = this.$refs['li2'][0].classList[1]
                if (value == 'left') {
                    this.$refs['li1'][0].classList.remove('right');
                    this.$refs['li1'][0].classList.add('left');

                    this.$refs['li2'][0].classList.remove('left');
                    this.$refs['li2'][0].classList.add('center');

                    this.$refs['li3'][0].classList.remove('center');
                    this.$refs['li3'][0].classList.add('right');
                }
                if (value == 'center') {
                    return
                }
                if (value == 'right') {
                    this.$refs['li1'][0].classList.remove('center');
                    this.$refs['li1'][0].classList.add('left');

                    this.$refs['li2'][0].classList.remove('right');
                    this.$refs['li2'][0].classList.add('center');

                    this.$refs['li3'][0].classList.remove('left');
                    this.$refs['li3'][0].classList.add('right');
                }

            }

            // 默认第三个
            if (index == 2) {
                let value = this.$refs['li3'][0].classList[1]
                if (value == 'left') {
                    this.$refs['li1'][0].classList.remove('center');
                    this.$refs['li1'][0].classList.add('right');

                    this.$refs['li2'][0].classList.remove('right');
                    this.$refs['li2'][0].classList.add('left');

                    this.$refs['li3'][0].classList.remove('left');
                    this.$refs['li3'][0].classList.add('center');
                }
                if (value == 'center') {
                    return
                }
                if (value == 'right') {
                    this.$refs['li1'][0].classList.remove('left');
                    this.$refs['li1'][0].classList.add('right');

                    this.$refs['li2'][0].classList.remove('center');
                    this.$refs['li2'][0].classList.add('left');

                    this.$refs['li3'][0].classList.remove('right');
                    this.$refs['li3'][0].classList.add('center');
                }

            }
        }
    }
}
</script>

<style lang="less" scoped>
.round {
    ul {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;

        li {
            img {
                width: 100%;
            }
            transition: all 0.5s linear;
            cursor: pointer;
        }

        .li1 {
            &.left {
                transform: translate(0, -10%) scale(0.8) !important;
                position: relative;
                z-index: 5;
            }
            &.center {
                transform: translate(100%, 0) scale(1.5) !important;
                position: relative;
                z-index: 6;
            }
            &.right {
                transform: translate(200%, -10%) scale(0.8) !important;
                position: relative;
                z-index: 5;
            }
        }
        .li2 {
            &.left {
                transform: translate(-100%, -10%) scale(0.8) !important;
                position: relative;
                z-index: 5;
            }
            &.center {
                transform: translate(0, 0) scale(1.5) !important;
                position: relative;
                z-index: 6;
            }
            &.right {
                transform: translate(100%, -10%) scale(0.8) !important;
                position: relative;
                z-index: 5;
            }
        }

        .li3 {
            &.left {
                transform: translate(-200%, -10%) scale(0.8) !important;
                position: relative;
                z-index: 5;
            }
            &.center {
                transform: translate(-100%, 0) scale(1.5) !important;
                position: relative;
                z-index: 6;
            }
            &.right {
                transform: translate(0%, -10%) scale(0.8) !important;
                position: relative;
                z-index: 5;
            }
        }
    }
}
</style>